<template>
  <view class="tourism-index">

    <!-- 主图片区域 -->
    <view class="main-image-section">
      <image 
        class="main-image" 
        src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" 
        mode="aspectFill"
      ></image>
    </view>

    <!-- 功能图标区域 -->
    <view class="function-icons-section">
      <view class="icons-grid">
        <!-- 第一行 -->
        <view class="icon-row">
          <view class="icon-item" @click="navigateTo('/pages/tourism/list/index?type=ticket')">
            <view class="icon-circle green">
              <uni-icons type="home-filled" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="icon-text">门票预订</text>
          </view>
          <view class="icon-item" @click="navigateTo('/pages/tourism/list/index?type=homestay')">
            <view class="icon-circle blue">
              <uni-icons type="calendar" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="icon-text">住宿预订</text>
          </view>
          <view class="icon-item" @click="navigateTo('/pages/tourism/list/index?type=restaurant')">
            <view class="icon-circle orange">
              <uni-icons type="shop" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="icon-text">餐饮美食</text>
          </view>
          <view class="icon-item" @click="navigateTo('/pages/tourism/list/index?type=specialty')">
            <view class="icon-circle brown">
              <uni-icons type="gift" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="icon-text">旅游特产</text>
          </view>
          <view class="icon-item" @click="navigateTo('/pages/tourism/list/index?type=activity')">
            <view class="icon-circle green-light">
              <uni-icons type="star" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="icon-text">活动爆款</text>
          </view>
        </view>
        
        <!-- 第二行 -->
        <view class="icon-row">
          <view class="icon-item" @click="navigateTo('/pages/tourism/list/index?type=zone')">
            <view class="icon-circle teal">
              <uni-icons type="location" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="icon-text">活动专区</text>
          </view>
          <view class="icon-item" @click="navigateTo('/pages/tourism/list/index?type=mall')">
            <view class="icon-circle pink">
              <uni-icons type="wallet" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="icon-text">积分商城</text>
          </view>
          <view class="icon-item" @click="navigateTo('/pages/tourism/list/index?type=guide')">
            <view class="icon-circle cyan">
              <uni-icons type="person" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="icon-text">导游导览</text>
          </view>
          <view class="icon-item" @click="navigateTo('/pages/tourism/list/index?type=heritage')">
            <view class="icon-circle blue-light">
              <uni-icons type="map" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="icon-text">枫桥经验</text>
          </view>
          <view class="icon-item" @click="navigateTo('/pages/tourism/list/index?type=data')">
            <view class="icon-circle indigo">
              <uni-icons type="bars" size="20" color="#FFFFFF"></uni-icons>
            </view>
            <text class="icon-text">数据总览</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部卡片区域 -->
    <view class="bottom-cards-section">
      <view class="cards-container">
        <!-- 左侧西施故里卡片 -->
        <view class="xishi-card" @click="navigateTo('/pages/tourism/list/index?type=xishi')">
          <view class="vertical-text">
            <text class="vertical-char">西</text>
            <text class="vertical-char">施</text>
            <text class="vertical-char">故</text>
            <text class="vertical-char">里</text>
          </view>
          <view class="character-section">
            <image class="character-img" src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80" mode="aspectFit"></image>
          </view>
        </view>
        
        <!-- 右侧卡片组 -->
        <view class="right-cards">
          <!-- 智能出行卡片 -->
          <view class="smart-travel-card" @click="navigateTo('/pages/tourism/list/index?type=smart-travel')">
            <text class="card-title">智能出行</text>
            <text class="card-subtitle">智慧旅游服务</text>
          </view>
          
          <!-- 底部两个小卡片 -->
          <view class="bottom-small-cards">
            <view class="small-card qingfeng-card" @click="navigateTo('/pages/tourism/list/index?type=qingfeng')">
              <text class="small-card-title">清风</text>
            </view>
            <view class="small-card data-card" @click="navigateTo('/pages/tourism/list/index?type=data')">
              <text class="small-card-title">数据</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="bottom-nav">
      <view class="nav-item active">
        <uni-icons type="home" size="20" color="#007AFF"></uni-icons>
        <text class="nav-text active">首页</text>
      </view>
      <view class="nav-item" @click="navigateTo('/pages/tourism/list/index')">
        <uni-icons type="list" size="20" color="#999"></uni-icons>
        <text class="nav-text">列表</text>
      </view>
      <view class="nav-item" @click="navigateTo('/pages/tourism/reviews/index')">
        <uni-icons type="chat" size="20" color="#999"></uni-icons>
        <text class="nav-text">评价</text>
      </view>
      <view class="nav-item" @click="navigateTo('/pages/user/index')">
        <uni-icons type="person" size="20" color="#999"></uni-icons>
        <text class="nav-text">我的</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TourismIndex',
  data() {
    return {
      
    }
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url,
        fail: (err) => {
          console.error('导航失败:', err);
          uni.showToast({
            title: '页面跳转失败',
            icon: 'none'
          });
        }
      });
    }
  },
  onLoad() {
    // 页面加载时的初始化逻辑
  }
}
</script>

<style scoped>
.tourism-index {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.tourism-index {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-bottom: 80px;
}


/* 主图片区域 */
.main-image-section {
  margin: 16px;
  border-radius: 12px;
  overflow: hidden;
  height: 160px;
}

.main-image {
  width: 100%;
  height: 100%;
}

/* 功能图标区域 */
.function-icons-section {
  background-color: #ffffff;
  margin: 0 16px 16px 16px;
  border-radius: 12px;
  padding: 24px 16px;
}

.icons-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.icon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

.icon-item:active {
  opacity: 0.7;
}

.icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 8px;
}

.icon-circle.green { background-color: #4CAF50; }
.icon-circle.blue { background-color: #2196F3; }
.icon-circle.orange { background-color: #FF9800; }
.icon-circle.brown { background-color: #8D6E63; }
.icon-circle.green-light { background-color: #8BC34A; }
.icon-circle.teal { background-color: #009688; }
.icon-circle.pink { background-color: #E91E63; }
.icon-circle.cyan { background-color: #00BCD4; }
.icon-circle.blue-light { background-color: #03A9F4; }
.icon-circle.indigo { background-color: #3F51B5; }

.icon-text {
  font-size: 12px;
  color: #666;
  text-align: center;
  line-height: 1.2;
}

/* 底部卡片区域 */
.bottom-cards-section {
  margin: 0 16px 20px 16px;
}

.cards-container {
  display: flex;
  gap: 12px;
  height: 120px;
}

/* 左侧西施故里卡片 */
.xishi-card {
  background: linear-gradient(135deg, #FF6B9D, #FF8E9B);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 80px;
  position: relative;
}

.vertical-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.vertical-char {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 2px;
}

.character-section {
  width: 35px;
  height: 35px;
}

.character-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

/* 右侧卡片组 */
.right-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 智能出行卡片 */
.smart-travel-card {
  background: linear-gradient(135deg, #4A90E2, #7BB3F0);
  border-radius: 12px;
  padding: 16px;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 2px;
}

.card-subtitle {
  color: #ffffff;
  font-size: 11px;
  opacity: 0.9;
}

/* 底部两个小卡片 */
.bottom-small-cards {
  display: flex;
  gap: 8px;
  height: 52px;
}

.small-card {
  flex: 1;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qingfeng-card {
  background: linear-gradient(135deg, #009688, #4DB6AC);
}

.data-card {
  background: linear-gradient(135deg, #3F51B5, #5C6BC0);
}

.small-card-title {
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
}

/* 底部导航栏 */
.bottom-nav {
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid #f0f0f0;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 12px;
  min-width: 60px;
}

.nav-item:active {
  opacity: 0.7;
}

.nav-text {
  font-size: 10px;
  color: #999;
  margin-top: 4px;
}

.nav-text.active {
  color: #007AFF;
}

/* 响应式适配 */
@media (max-width: 375px) {
  .search-box {
    min-width: 100px;
  }
  
  .search-text {
    font-size: 11px;
  }
  
  .icon-text {
    font-size: 11px;
  }
  
  .card-title {
    font-size: 16px;
  }
}

/* 响应式适配 */
@media (max-width: 375px) {
  .search-box {
    width: 140px;
  }
  
  .icon-text {
    font-size: 11px;
  }
  
  .card-title {
    font-size: 14px;
  }
  
  .card-subtitle {
    font-size: 11px;
  }
}
</style>